<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:titletext,liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexright">
					<view class="nostrongtext" @click="addcustomer">保存</view>
				</view>
			</view>
		</header-top>
		<view class="mainpadding">
			<view class="strongtext">
				<text class="titletext textliner">基本信息</text>
			</view>
		</view>
		<view class="mainpadding ffffff">
			<view class="inputbox">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">供货商名称</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入供货商名称" v-model="name">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">联系人</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入联系人" v-model="username">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">联系电话</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入联系电话" v-model="mobile">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="strongtext flex1">关联号</view>
				<view class="itembox flexbetween">
					<input type="text" placeholder="请输入供应商关联号" v-model="shop_no">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="strongtext flex1">电话备注</view>
				<view class="itembox">
					<input type="text" placeholder="请输入电话备注" v-model="mobile_note">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="strongtext flex1">微信号</view>
				<view class="itembox">
					<input type="text" placeholder="请输入微信号" v-model="wechat_code">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="strongtext flex1">营业执照信用代码</view>
				<view class="itembox">
					<input type="text" placeholder="请输入营业执照信用代码" v-model="yyzz_code">
				</view>
			</view>
			<uni-data-picker :localdata="items" placeholder="请选择供应商片区" popup-title="请选择供应商片区" v-model="pq_area_id"
				@change="bindPickerChange1">
				<view class="inputbox margin_top">
					<view class="flexleft flex1">
						<view class="strongtext margin_right">供应商片区</view>
						<view class="bitian">*</view>
					</view>
					<view class="itembox flexbetween">

						<text class="word12" v-if="!area1.length">请选择供应商片区</text>
						<text class="word13" v-else>{{ area1[0] }}/{{ area1[1] }}/{{ area1[2] }}</text>
						<view class="righticon2"></view>
					</view>
				</view>
			</uni-data-picker>
			<uni-data-picker :localdata="items" placeholder="请选择供应商地区" popup-title="请选择供应商地区" v-model="area_id"
				@change="bindPickerChange2">
				<view class="inputbox margin_top">
					<view class="flexleft flex1">
						<view class="strongtext margin_right">供应商地区</view>
						<view class="bitian">*</view>
					</view>
					<view class="itembox flexbetween">

						<text class="word12" v-if="!area2.length">请选择供应商地区</text>
						<text class="word13" v-else>{{ area2[0] }}/{{ area2[1] }}/{{ area2[2] }}</text>
						<view class="righticon2"></view>
					</view>
				</view>
			</uni-data-picker>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">供应商详细地址</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween" @click="getLocation">
					<input type="text" placeholder="请选择详细地址" disabled="" v-model="address">
					<view class="addressicon2"></view>
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">行业</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween" @click="gysHangYeShow=true">
					<input type="text" placeholder="点击选择行业" disabled v-model="gysHangYeText">
					<view class="righticon2"></view>
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="strongtext flex1">开户银行</view>
				<view class="itembox flexbetween">
					<input type="text" placeholder="请输入开户银行" v-model="open_bank">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="strongtext flex1">银行卡号</view>
				<view class="itembox flexbetween">
					<input type="text" placeholder="请输入银行卡号" v-model="bank_account">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="strongtext flex1">持卡人</view>
				<view class="itembox flexbetween">
					<input type="text" placeholder="请输入银行卡号" v-model="bank_name">
				</view>
			</view>

			<view class="inputbox margin_top">
				<view class="strongtext flex1">供货商品</view>
				<view class="itembox flexbetween">
					<input type="text" placeholder="请输入供货商品" v-model="gh_goods">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="strongtext flex1">企业税号</view>
				<view class="itembox flexbetween">
					<input type="text" placeholder="请输入企业税号" v-model="qyrh_code">
				</view>
			</view>
			<view class="inputbox margin_top" v-if="listid">
				<view class="strongtext flex1">入驻时间</view>
				<view class="itembox flexbetween">{{httpRequest.returnDate(createtime*1000)}}</view>
			</view>
		</view>
		<selectGYSHangYe :message="{gysHangYeShow:gysHangYeShow}" @gysHangYeSure="gysHangYeSure"></selectGYSHangYe>
		<!-- 行业 -->

	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				httpRequest,
				// 供应商行业
				gysHangYeShow: false,
				gysHangYeText: "",
				industry_id: "", //行业id
				name: "",
				username: "",
				mobile: "",
				mobile_note: "",
				wechat_code: "",
				yyzz_code: "",
				pq_province_id: "",
				pq_city_id: "",
				pq_area_id: "",
				province_id: "",
				city_id: "",
				area_id: "",
				// #ifdef APP-PLUS
				address: "", //详细地址
				// #endif
				// #ifdef MP-WEIXIN || H5
				address: "详细地址", //详细地址
				// #endif
				open_bank: "",
				bank_account: "",
				bank_name: "",
				shop_no: "",
				gh_goods: "",
				qyrh_code: "",
				longitude: "",
				latitude: "",
				items: [],
				area1: [], //片区
				area2: [], //地区
				titletext: "添加供应商档案",
				listid: "",
				createtime:""
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.items = JSON.parse(JSON.stringify(citys.data))
			if (this.listid) {
				this.titletext = "编辑供应商档案"
				this.getdetail()
			}

		},
		methods: {
			gysHangYeSure(e) {
				if (e) {
					this.gysHangYeText = e.value[0].name
					this.industry_id = e.value[0].id
				}
				this.gysHangYeShow = false
			},
			// 获取详情数据
			getdetail() {
				httpRequest.request('/dhtapi/Supplier/detail', 'POST', {
					id: this.listid
				}, false, false, true).then(res => {
					console.log(res, "接口返回数据")
					let data = res.data
					this.name = data.name
					this.username = data.username
					this.mobile = data.mobile
					this.mobile_note = data.mobile_note
					this.wechat_code = data.wechat_code
					this.yyzz_code = data.yyzz_code
					this.pq_province_id = data.pq_province_id
					this.pq_city_id = data.pq_city_id
					this.pq_area_id = data.pq_area_id
					this.province_id = data.province_id
					this.city_id = data.city_id
					this.area_id = data.area_id
					this.address = data.address
					this.industry_id = data.industry_id
					this.open_bank = data.open_bank
					this.bank_account = data.bank_account
					this.createtime = data.createtime
					this.shop_no = data.manystoreshop.shop_no
					this.gh_goods = data.gh_goods
					this.qyrh_code = data.qyrh_code
					this.longitude = data.longitude
					this.latitude = data.latitude
					let pq_cityinfo = data.pq_cityinfo.split("/")
					let cityinfo = data.cityinfo.split("/")
					this.gysHangYeText = data.industry.name
					this.area1 = [pq_cityinfo[0], pq_cityinfo[1], pq_cityinfo[2]] //片区
					this.area2 = [cityinfo[0], cityinfo[1], cityinfo[2]] //地区
				})
			},
			bindPickerChange1(val) {
				let area1 = val.detail.value
				this.area1 = [area1[0].text, area1[1].text, area1[2].text];
				this.pq_province_id = area1[0].value;
				this.pq_city_id = area1[1].value;
				this.pq_area_id = area1[2].value;
			},
			bindPickerChange2(val) {
				let area2 = val.detail.value
				this.area2 = [area2[0].text, area2[1].text, area2[2].text];
				this.province_id = area2[0].value;
				this.city_id = area2[1].value;
				this.area_id = area2[2].value;
			},
			checkphone(num) {
				let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(num);
				return a;
			},
			addcustomer() {
				let _this = this;
				if (_this.name == '') {
					httpRequest.toast('请输入供货商名称!');
					return false;
				}
				if (_this.username == '') {
					httpRequest.toast('请输入联系人名称!');
					return false;
				}
				if (_this.mobile == '') {
					httpRequest.toast('请输入联系电话!');
					return false;
				}
				if (!_this.checkphone(_this.mobile) && _this.mobile != '') {
					httpRequest.toast('电话输入有误')
					return false;
				}
				if (this.pq_province_id == "") {
					httpRequest.toast('请选择供应商片区!');
					return false;
				}
				if (this.province_id == "") {
					httpRequest.toast('请选择供应商地区!');
					return false;
				}
				if (_this.address == '') {
					httpRequest.toast('请输入供应商详细地址!');
					return false;
				}
				if (_this.industry_id == '') {
					httpRequest.toast('请选择行业!');
					return false;
				}
				let data = {
					name: this.name,
					username: this.username,
					mobile: this.mobile,
					mobile_note: this.mobile_note,
					wechat_code: this.wechat_code,
					yyzz_code: this.yyzz_code,
					pq_province_id: this.pq_province_id,
					pq_city_id: this.pq_city_id,
					pq_area_id: this.pq_area_id,
					province_id: this.province_id,
					city_id: this.city_id,
					area_id: this.area_id,
					address: this.address,
					industry_id: this.industry_id,
					open_bank: this.open_bank,
					bank_account: this.bank_account,
					shop_no: this.shop_no,
					gh_goods: this.gh_goods,
					qyrh_code: this.qyrh_code,
					longitude: this.longitude,
					latitude: this.latitude,
					id: this.listid
				}
				let url = ""
				if (!this.listid) {
					// 新增
					delete data.id
					url = '/dhtapi/Supplier/addSupplier'
				} else {
					// 编辑
					url = '/dhtapi/Supplier/editSupplier'
				}
				httpRequest.request(url, 'POST', data).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg)
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})

			},
			getLocation() {
				let _this = this
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称:' + res.longitude);
						console.log('位置名称:' + res.latitude);
						console.log('详细地址:' + res.address);
						// _this.address = res.address.replace(/.+?(省|市|自治区|自治州|县|区)/g, '');
						_this.longitude = res.longitude
						_this.latitude = res.latitude
						_this.address = res.address
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.flex1 {
		flex: 4;
	}

	.inputbox {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.itembox {
		flex: 7;
		width: 100%;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.06);
	}

	.strongtext {
		line-height: 42rpx;
	}

	// 地址选择
	.word12 {

		color: #808080;
		font-size: 32rpx;
	}

	.word13 {
		color: #000;
		font-size: 32rpx;
	}
</style>